<template>
  <div class="newVs">
    <div class="mask"></div>
    <div class="new_ss">
      <div class="vs-top">
        <p>{{ title }}资料（店铺销售）</p>
        <i class="el-icon-close" @click="closeIconClick"></i>
      </div>
      <div class="vs-info">
        <div class="VIPinfo">
          <!-- 第一行左边的布局 -->
          <div>
            <span>
              <p>{{ showCurrentVipObj.name }}</p>
              <p>姓名</p>
            </span>
            <span>
              <p>{{ showCurrentVipObj.consumeMoney }}</p>
              <p>历史消费额</p>
            </span>
            <span>
              <p>{{ showCurrentVipObj.integralNumber }}</p>
              <p>积分</p>
            </span>
            <span>
              <p>{{ showCurrentVipObj.balance }}</p>
              <p>账户余额</p>
            </span>
            <span class="VIPinfoBtn">
              <p @click="lookVipBtnClick">查看VIP</p>
              <p @click="lookAllVipClick">全部VIP</p>
            </span>
          </div>
          <!-- 第一行右边的布局 -->
          <div>
            <span style="cursor: pointer">
              <p>{{ you_hui }}</p>
              <p>优惠</p>
            </span>
            <span>
              <!-- 数量只保留两位，不可能有小数的数量 -->
              <!-- <p>{{ Math.floor(totalNumber * 100) / 100 }}</p> -->
              <p>{{ totalNumber }}</p>
              <p>数量</p>
            </span>
            <span>
              <p>{{ discount ? Math.floor(discount * 100) / 100 : 0 }}</p>
              <p>折数</p>
            </span>
            <span>
              <p>{{ diaopai_jiner }}</p>
              <p>吊牌金额</p>
            </span>
            <span>
              <!-- <p>{{ Math.floor(yingshou_jiner * 100) / 100 }}</p> -->
              <p>{{ yingshou_jiner }}</p>
              <p>应收金额</p>
            </span>
          </div>
        </div>
        <!-- 第二行的容器 -->
        <div class="info">
          <div>
            <p>销售日期</p>
            <el-date-picker
              :disabled="barcodeTableData.length ? true : false"
              v-model="sellTimeValue"
              type="date"
              style="margin-right: 10px"
            ></el-date-picker>
            <!-- value-format="yyyy-MM-dd HH:mm:ss" -->

            <p>VIP</p>
            <el-select
              :disabled="barcodeTableData.length ? true : false"
              filterable
              class="wd"
              v-model="vipPullSelectValue"
              placeholder="请选择"
              @change="vipPullSelectValueChange"
            >
              <el-option
                v-for="item in vipPullSelectList"
                :key="item.id"
                :label="item.phone + item.name"
                :value="item.phone"
              >
                <!-- 自定义模板 这是下拉框显示的而已-->
                <span style="float: left">{{ item.phone }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.name
                }}</span>
              </el-option>
            </el-select>
            <!-- 折数 -->
            <p style="margin-left: 10px">折数</p>
            <el-input
              :disabled="barcodeTableData.length ? true : false"
              v-model.number="discountInputValue"
              type="number"
              @change="discountInputValueChange"
            >
            </el-input>
            <el-input
              v-model="show_yingyeyuan_info"
              :disabled="true"
              class="yinyueyuan"
            >
            </el-input>
            <el-button
              style="margin-left: 10px"
              type="primary"
              @click="yingyueyuan_btnClick"
              >营业员</el-button
            >
          </div>
          <span class="xuhao">销售序号:{{ SellSequence }}</span>
        </div>
        <!-- 尺码表格容器 -->
        <div class="size_container">
          <el-table
            border
            :data="sizeTableData"
            id="codeTable"
            class="tb-edit"
            style="width: 100%; margin-bottom: 15px"
            max-height="148px"
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '36px' }"
          >
            <el-table-column :label="header" width="150"></el-table-column>
            <el-table-column prop="colorName" label="颜色"></el-table-column>
            <!-- 想渲染表格，那么就一定要让表格属性里面有:prop="i"，否则拿不到任何相应的数据 -->
            <template v-for="i in sizeList">
              <el-table-column :prop="i" :label="i" :key="i + Math.random()">
                <!-- scope.row[i]这个是拿到表头尺码对应的值 -->
                <template slot-scope="scope">
                  <el-input
                    size="small"
                    v-model="scope.row[i]"
                    @blur="
                      handleInputBlurResult($event, {
                        index: scope.$index,
                        key: i,
                        result: scope.row[i]
                      })
                    "
                    @keyup.enter.native="inpEnter"
                  ></el-input>
                  <!-- <span style="display:none;">{{scope.row[i]}}</span> -->
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
        <!-- 第三行的容器 -->
        <!-- :disabled="barcodeTableData.length" -->
        <div class="enterBarcode">
          <p style="margin: 0 0 0 10px; line-height: ">类型</p>
          <el-select
            v-model="typePullSelectValue"
            :disabled="barcodeTableData.length ? true : false"
          >
            <el-option
              v-for="item in typePullSelectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <p style="margin: 0 0 0 10px; line-height: ">件单价</p>
          <el-input
            v-model.number="unitPriceInputValue"
            type="number"
            :disabled="unitPriceCheckBoxStatus ? false : true"
          >
            <template slot="prepend">
              <el-checkbox v-model="unitPriceCheckBoxStatus"></el-checkbox>
            </template>
          </el-input>
          <el-input
            id="input"
            ref="barcodeInput"
            v-model="barcodeInputValue"
            placeholder="扫描/输入，输完按回车"
            @keyup.enter.native="barcodeEnterEvent($event)"
            @input="watchInputCurrentChange"
          ></el-input>

          <el-input
            placeholder="小票号输入栏"
            v-model="small_piao_inputValue"
          ></el-input>
          <el-input placeholder="备注" v-model="remarkInputValue"></el-input>
        </div>

        <el-table
          :height="sizeList.length === 0 ? '39vh' : '30vh'"
          :data="barcodeTableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '36px' }"
        >
          <el-table-column
            prop="colorName"
            label="颜色名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="size"
            label="尺码编号"
            align="center"
          ></el-table-column>
          <!-- 数量 -->
          <el-table-column prop="number" label="数量" align="center">
            <template slot-scope="scope">
              <el-input
                v-model.number="scope.row.number"
                class="tabinp"
                @blur="handleTableInputBlur(scope.row)"
                @change="numberInputChange(scope.row)"
                @focus="numberInputFocus(scope.row)"
                @input="inputChange(scope.row)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="sellPrice"
            label="售价"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="kindsNumber"
            label="款号"
            align="center"
          ></el-table-column>
          <!-- 折数 -->
          <el-table-column prop="discount" label="折数" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.discount"
                class="tabinp"
                @blur="handleTableInputBlur(scope.row)"
                @change="disNumberInputChange(scope.row)"
                @focus="numberInputFocus(scope.row)"
                @input="inputChange(scope.row)"
              ></el-input>
            </template>
          </el-table-column>
          <!-- 单价 -->
          <el-table-column prop="onePrice" label="单价" align="center">
            <template slot-scope="scope">
              <el-input
                class="tabinp"
                v-model="scope.row.onePrice"
                @blur="handleTableInputBlur(scope.row)"
                @focus="numberInputFocus(scope.row)"
                @change="onePriceInputChange(scope.row)"
                @input="inputChange(scope.row)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="money"
            label="金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="preferential"
            label="优惠"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="commodityName"
            label="品名名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="brandedName"
            label="品牌名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="enteringTime"
            label="录入时间"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </div>

      <div class="ss-btn">
        <el-button @click="closeBtnClick">关闭</el-button>
        <el-button @click="accountsBtnClick" :disabled="accountsBtnDisabled"
          >结账</el-button
        >

        <el-button @click="confirmBtnClick" :disabled="confirmBtnDisabled"
          >确认</el-button
        >
        <el-button
          type="primary"
          :disabled="keepBtnDisabled"
          @click="keepGoingBtnClick"
          >继续录入</el-button
        >
      </div>
    </div>
    <!-- 点击新增vip的时候，弹出的组件 -->
    <NewAddVip
      v-if="isShowNewAddVipDialog"
      @closeNewAddVipDialog="closeNewAddVipDialog"
      @updataVipList="updataVipList"
    ></NewAddVip>
    <!-- 点击查看vip的时候，弹出的组件 -->
    <LookVip
      v-if="isShowLookVipDialog"
      :showCurrentVipObj="showCurrentVipObj"
      @lookVipcloseIconBtnClick="isShowLookVipDialog = false"
    ></LookVip>
    <checkout v-if="false"></checkout>
    <!-- 点击结账的时候，弹出的组件 -->
    <Accounts
      v-if="isShowAccountsDialog"
      :showCurrentVipObj="showCurrentVipObj"
      :yingshou_jiner="yingshou_jiner"
      :sellSequence="SellSequence"
      @accountsCloseIconClick="accountsCloseIconClick"
      @accountsCloseIconClickAndDiableBtn="accountsCloseIconClickAndDiableBtn"
    ></Accounts>
    <!-- 点击营业员显示的dialog -->
    <ClerkClick
      v-if="isShow_yingyueyuan_dislog"
      @close_yingyueyuan_dialog="close_yingyueyuan_dialog"
      @keepNewStr="keepNewStr"
    />
  </div>
</template>

<script>
// 基本接口的引入
import { get_vip_customer_data_api } from '../../../../request/page_base_api/page_base_api.js'
// 页面接口的引入
import {
  add_store_sales_api,
  confirm_api,
  edit_bottom_table_blur_api,
  get_discount_api
} from '../../../../request/store/store_sales_request.js'
// 根据货号获取所有货号数组
import { getKindsNumberList } from '../../../../network/artNo.js'
// 条码规律控制层
import { getBarCode } from '../../../../network/manufacturer.js'

// 组件的引入
import ClerkClick from './ClerkClick.vue'
// 新增vip的组件
import NewAddVip from './NewAddVip.vue'
// 查看vip的信息的组件
import LookVip from './LookVip.vue'
// 点击结账的时候，弹出的组件
import Accounts from './Accounts.vue'
// minix的引入
import today from '../../../../components/mixins/today.js'
export default {
  name: 'NewAdd',
  mixins: [today],
  data() {
    return {
      setNumber: '',
      // 控制确认按钮是否可以被点击
      confirmBtnDisabled: true,
      // 控制结账按钮是否可以被点击 (默认不可以被点击，点击了确认才可以点击)
      accountsBtnDisabled: true,
      // 控制继续录入按钮是否可以被点击
      keepBtnDisabled: false,
      // 保存店铺销售序号（显示在销售序号） // 也给 结账 传了  // 还给了父组件查询,只有在点击继续录入的时候，才拿到这个销售序号
      SellSequence: '',
      //  保存客户销售序号（没有在页面上用到）
      customerSellSequence: '',
      // 折数输入框输入的值
      discountInputValue: '',
      // 计算折数
      // discount: 0,
      // 优惠
      // you_hui: 0,
      // 计算数量
      // totalNumber: 0,
      // 右边显示的折数
      // left_discount: 0,
      // 应收金额
      // yingshou_jiner: '',
      currentLabel: '',
      // 显示结账的dialog
      isShowAccountsDialog: false,
      // 点击查看vip的时候，要展示的对象 // 保存选中的vip对象 // 选中的vip全局的对象
      showCurrentVipObj: {},
      // 控制'查看vip'的dialog
      isShowLookVipDialog: false,
      // 控制新增vip的dialog是否显示
      isShowNewAddVipDialog: false,
      // 保存子组件存过来的字符串营业员
      show_yingyeyuan_info: '',
      // 是否显示营业员的对话框
      isShow_yingyueyuan_dislog: false,
      // 显示营业员信息
      show_yingyeyuan_info: '',
      // 保存子组件传过来的营业员数组
      yingyeyuan_arr: [],
      // 尺码表头数据
      header: '',
      // 尺码表格数据
      sizeTableData: [],
      // 尺码数据数组
      sizeList: [],
      // 标题
      title: '新建',

      // vip下拉框选中的值和数组
      vipPullSelectValue: '',
      vipPullSelectList: [{ id: -100, phone: '+', name: '新增' }],
      // 这个是后端要拿到的vip输入框的值
      currentvipPullSelectValue: '',
      // sizeList: [''],
      // 扫描/输入，输完按回车输入的值(款号)
      barcodeInputValue: '',
      // 小票号输入框输入的值
      small_piao_inputValue: '',
      // 备注输入框输入的值
      remarkInputValue: '',
      // 表格数据
      barcodeTableData: [],
      // 类型下拉框选中的值和数组 （v-module显示的是value的label），（后端要求有默认值）
      typePullSelectValue: 1,
      typePullSelectList: [
        { value: 1, label: '正常' },
        { value: 2, label: '退货' },
        { value: 3, label: '赠送' }
        // { value: 3, label: '全额' }
      ],
      // 销售日期的值
      sellTimeValue: '',
      // 件单价输入的值
      unitPriceInputValue: '',
      // 件单价复选框选中的值
      unitPriceCheckBoxStatus: false,
      // 保存品牌公司对象
      manufacturerBarCode: {}
    }
  },
  created() {
    this.get_vip_customer_data()
    // 一进来就要显示时间
    this.sellTimeValue = this.getNowTime1()
  },

  methods: {
    /**
     * --------- 新增 ---------
     */
    // 改变件单价的选择状态
    // onChangeCheckboxStatus(status) {
    //   console.log(this.unitPriceCheckBoxStatus)
    //   console.log(status)
    // },
    /**
     * --------- 新增 结束---------
     */
    // 监听子组件事件，更新updataVip
    updataVipList() {
      this.get_vip_customer_data()
    },

    /* 修改的时候，要输入的输入框获得焦点的时候，触发的函数 */
    numberInputFocus(row) {
      //  获得焦点的时候，把这个对象存在本地，和失去焦点的时候比较，最后都要清掉
      localStorage.setItem('focusOldObj', JSON.stringify(row))
    },
    // 输入的值发生改变的时候
    inputChange(row, val) {
      // console.log(row)
      // console.log(val)
    },
    /* 折数改变的时候，触发的函数 */
    disNumberInputChange(row) {
      // 获得焦点的时候，存的，change还在，失去焦点才清楚
      const localOldObject = JSON.parse(localStorage.getItem('focusOldObj'))
      // console.log('localOldObject', localOldObject)
      if (isNaN(parseFloat(row.discount))) {
        this.$message.warning('输入非法，只能输入为数字')
        return (row.discount = localOldObject.discount)
      }
      // 获得焦点的时候，存的，change还在，失去焦点才清楚
      // const localOldObject = JSON.parse(localStorage.getItem('focusOldObj'))
      // console.log('localOldObject', localOldObject)
      // console.log(row.discount)
      if (row.discount > 10) {
        this.$message.warning('折数只能在1~10,最大为10,请重新输入')
        return (row.discount = localOldObject.discount)
      }
      if (row.discount <= 0) {
        this.$message.warning('折数只能在1~10,最小为1,请重新输入')
        return (row.discount = localOldObject.discount)
      }
    },
    /* 数量发生改变的时候，触发的函数 1. 退货只能输入负数 2. 其实的只能正数*/
    numberInputChange(row) {
      // 获得焦点的时候，存的，change还在，失去焦点才清楚
      const localOldObject = JSON.parse(localStorage.getItem('focusOldObj'))
      // 进来这个逻辑，证明是非数
      if (isNaN(parseFloat(row.number))) {
        this.$message.warning('只能修改为数字')
        return (row.number = localOldObject.number)
      }
      // console.log('localOldObject', localOldObject)
      // 类型退货的
      if (row.sequenceType === 2) {
        if (row.number >= 0) {
          this.$message.warning(
            '类型为退货,数量只能为负数，最大为 -1,请重新输入'
          )
          return (row.number = localOldObject.number)
        }
      } else {
        // 如果是正常或者赠送，只能正数
        if (row.number <= 0) {
          this.$message.warning('类型为正常或者赠送,数量最小为 1,请重新输入')
          return (row.number = localOldObject.number)
        }
      }
    },
    /* 表格中的单价发生改变的时候，触发的函数 */
    onePriceInputChange(row) {
      // console.log('失去焦点', row)
      // 获得焦点的时候，存的，change还在，失去焦点才清楚
      const localOldObject = JSON.parse(localStorage.getItem('focusOldObj'))

      // if (isNaN(row.onePrice)) {
      if (isNaN(parseFloat(row.onePrice))) {
        this.$message.warning('只能输入为数字,请重新输入')
        return (row.onePrice = localOldObject.onePrice)
      }
      // 没有这步的时候，实际输入不是数字，而是改变成字符串，所以才会这样提示久!= 新
      // if (row.onePrice === '') {
      //   this.$message.warning('只能输入数字，请重新输入')
      //   row.onePrice = localOldObject.onePrice
      // }
    },
    /*
      表格中的input输入框失去焦点的时候，触发的函数
    */
    async handleTableInputBlur(currentRowObj) {
      // console.log('失去焦点了')
      // console.log('currentRowObj', currentRowObj)
      // 失去焦点的时候，判断输入框的值是否改变
      const oldObj = JSON.parse(localStorage.getItem('focusOldObj'))
      // 进来这个逻辑，证明是非数
      if (isNaN(currentRowObj.number)) {
        this.$message.warning('只能输入为数字,请重新输入')
        currentRowObj.number = oldObj.number
        localStorage.removeItem('focusOldObj')
        return
      }
      // // 进来这个逻辑，证明是非数
      if (isNaN(currentRowObj.discount)) {
        this.$message.warning('只能输入为数字,请重新输入')
        currentRowObj.discount = oldObj.discount
        localStorage.removeItem('focusOldObj')
        return
      }
      if (isNaN(currentRowObj.onePrice)) {
        this.$message.warning('只能输入为数字,请重新输入')
        currentRowObj.onePrice = oldObj.onePrice
        localStorage.removeItem('focusOldObj')
        return
      }
      /* 前面用isNan来先预判了，能到这里一定能转成数字 */
      // 每次失去焦点的时候，拿到的是字符串，然后要转成数字来比较(一定要这一步)
      // currentRowObj.number = Number(currentRowObj.number)
      // currentRowObj.discount = Number(currentRowObj.discount)
      // // Number('') 里面是空的话，会返回0，只能用这个parseFloat
      // 转为数字
      currentRowObj.onePrice = parseFloat(currentRowObj.onePrice)
      currentRowObj.discount = parseFloat(currentRowObj.discount)
      currentRowObj.number = parseFloat(currentRowObj.number)
      // 失去焦点的时候，判断输入框的值是否改变
      // const oldObj = JSON.parse(localStorage.getItem('focusOldObj'))
      // console.log('oldObj', oldObj)
      // console.log(currentRowObj, 'handleTableInputBlur')
      // 这个判断主要是，不改变的时候，不能发起ajax请求
      if (
        currentRowObj.number !== oldObj.number ||
        currentRowObj.discount !== oldObj.discount ||
        currentRowObj.onePrice !== oldObj.onePrice
      ) {
        // console.log('currentRowObj.onePrice', currentRowObj.discount)
        // console.log('oldObj.onePricee', oldObj.discount)
        // console.log(currentRowObj.number === oldObj.number)
        // console.log(currentRowObj.discount === oldObj.discount)
        // console.log(currentRowObj.onePrice === oldObj.onePrice)
        localStorage.removeItem('focusOldObj')
        /**
         * 下面这个遍历，将输入框中的数据，全部变成数字
         */
        // this.barcodeTableData.forEach((item) => {
        //   if (item.number) {
        //     item.number = parseFloat(item.number)
        //   }
        //   if (item.discount) {
        //     item.discount = parseFloat(item.discount)
        //   }
        //   if (item.onePrice) {
        //     item.onePrice = parseFloat(item.onePrice)
        //   }
        // })
        // console.log('barcodeTableData', this.barcodeTableData)
        // 失去焦点的时候，马上要算出来单价， 单价 = 原来的售价 * 折数
        // this.barcodeTableData.forEach((item) => {
        //   if (currentRowObj.id === item.id) {
        //     // 计算单价
        //     // item.onePrice = item.sellPrice * (item.discount / 10)
        //     // Math.floor(totalNumber * 100) / 100  // 保留两位
        //     // 单价 = 售价 * 折数  （下面只是保留了两位数） => 折数 = 单价 / 售价
        //     item.onePrice =
        //       Math.floor(item.sellPrice * (item.discount / 10) * 100) / 100
        //   }
        // })

        // console.log('开始发起ajax请求')
        // // 失去焦点的时候，马上要算出来金额
        // this.barcodeTableData.forEach((item) => {
        //   if (currentRowObj.id === item.id) {
        //     // 计算金额(保留两位) = 单价 * 数量
        //     // item.money = item.onePrice * item.number * (item.discount / 10)
        //     item.money = Math.floor(item.onePrice * item.number * 100) / 100
        //   }
        // })
        // 失去焦点的时候，马上要算出来单价， 折数 = 单价 / 售价
        // this.barcodeTableData.forEach((item) => {
        //   if (currentRowObj.id === item.id) {
        //     // 计算单价
        //     // item.onePrice = item.sellPrice * (item.discount / 10)
        //     // Math.floor(totalNumber * 100) / 100  // 保留两位
        //     // 单价 = 售价 * 折数  （下面只是保留了两位数） => 折数 = 单价 / 售价
        //     item.discount = (item.onePrice * 10) / item.sellPrice
        //     // (Math.floor(item.onePrice / item.sellPrice) * 100) / 100
        //   }
        // })
        // 失去焦点的时候，计算出来，并且发送ajax请求
        // console.log(this.barcodeTableData, '失去焦点的时候')
        // 深克隆一份格式时间给后端
        /**
         *
         * @cloneBarcodeTable  改写，之后，深clone的cloneBarcodeTable没有意义
         *  cloneBarcodeTable = JSON.parse(
          JSON.stringify(this.barcodeTableData)
        )
        // 失去焦点的时候，时间格式发给后端错误，在这里进行了格式的转换，但是应该转换之后，表格的数据有问题，所以进行深度clone一个数组，给后端(改写，之后，深clone的cloneBarcodeTable没有意义，可以删除)
        cloneBarcodeTable.forEach((item) => {
          if (item.enteringTime) {
            let data = new Date(item.enteringTime)
            console.log(data, 'item.enteringTime')
            item.enteringTime = data
          }
          if (item.sellTime) {
            let data1 = new Date(item.enteringTime)
            console.log(data1, 'item.enteringTime')
            item.sellTime = data1
          }
        })
              @ 到这里结束
        */

        /* 为数组的每一项都加上 sequenceType = this.typePullSelectValue(类型),后端后来要求*/
        // cloneBarcodeTable.forEach((item) => {
        //   item.sequenceType = this.typePullSelectValue
        // })
        // console.log(cloneBarcodeTable, '失去焦点的时候')
        // console.log(currentRowObj, '失去焦点的时候')
        // 原来是要数组的，现在改成要对象
        // const { data: res } = await edit_bottom_table_blur_api(cloneBarcodeTable)
        const { data: res } = await edit_bottom_table_blur_api(currentRowObj)
        // console.log(res, 'edit_bottom_table_blur_api')
        if (res.code !== 200) return
        // 成功
        this.barcodeTableData = res.data
        this.$message.success('修改成功')
        // 成功之后的逻辑（更改右上角的数字）
      } else {
        // 这个主要为了，能让数据失去响应式，能比较
        localStorage.removeItem('focusOldObj')
      }
    },
    /*
      点击继续录入的时候，触发的函数
    */
    async keepGoingBtnClick() {
      console.log(this.unitPriceCheckBoxStatus)

      // 销售日期不能为空
      if (!this.sellTimeValue) return this.$message.warning('销售日期不能为空')
      if (!this.vipPullSelectValue) return this.$message.warning('vip不能为空')
      if (!this.yingyeyuan_arr.length) {
        return this.$message.warning('营业员不能为空')
      }

      if (!this.typePullSelectValue) return this.$message.warning('请选择类型')
      // if (!this.unitPriceInputValue)
      //   return this.$message.warning('请输入件单价')
      if (!this.barcodeInputValue) return this.$message.warning('款号不能为空')
      // 如果中间表格是空的，那么直接return
      if (!this.sizeTableData.length) return
      // 创建一个空对象，用来保存数据

      if (this.unitPriceCheckBoxStatus) {
        if (!this.unitPriceInputValue) {
          this.$message.warning('请输入件单价')
        } else {
          this._continue()
        }
      } else {
        this._continue()
      }
    },
    // 继续录入的私有方法
    async _continue() {
      let mapObj = {}
      this.sizeTableData.map((item) => {
        // console.log(item,"itemitem");
        for (const key in item) {
          if (key !== 'colorName' && key !== 'colorNo' && item[key] !== '') {
            // 拿到款号，尺码，可以开始拼接，拼接之前，先判断怎么拼接
            // 有型色尺
            console.log(this.manufacturerBarCode, 'this.manufacturerBarCode')
            if (this.manufacturerBarCode.styleColorSize) {
              // 款号与尺码之间有 -
              if (this.manufacturerBarCode.styleColor) {
                // 尺码与色号之间有 -
                if (this.manufacturerBarCode.colorSize) {
                  mapObj[`${this.header}-${key}-${item.colorNo}`] = Number(
                    item[key]
                  )
                } else {
                  // 色号与尺码之间没有 -
                  mapObj[`${this.header}-${key}${item.colorNo}`] = Number(
                    item[key]
                  )
                }
              } else {
                // 款号与尺码之间没有 -
                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  mapObj[`${this.header}${key}-${item.colorNo}`] = Number(
                    item[key]
                  )
                } else {
                  // 色号与尺码之间没有 -
                  mapObj[`${this.header}${key}${item.colorNo}`] = Number(
                    item[key]
                  )
                }
              }
            } else {
              // 没有型色尺
              if (this.manufacturerBarCode.styleColor) {
                // 款号与颜色之间有 -
                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  mapObj[`${this.header}-${item.colorNo}-${key}`] = Number(
                    item[key]
                  )
                } else {
                  // 色号与尺码之间没有 -
                  mapObj[`${this.header}-${item.colorNo}${key}`] = Number(
                    item[key]
                  )
                }
              } else {
                // // 款号与颜色之间没有 -
                if (this.manufacturerBarCode.colorSize) {
                  // 色号与尺码之间有 -
                  mapObj[`${this.header}${item.colorNo}-${key}`] = Number(
                    item[key]
                  )
                } else {
                  // 色号与尺码之间没有 -
                  mapObj[`${this.header}${item.colorNo}${key}`] = Number(
                    item[key]
                  )
                }
              }
            }
          }
        }
      })
      // console.log(mapObj, 'mapObj')
      // this.sizeTableData.map((item) => {
      //   for (const key in item) {
      //     if (key !== 'colorName' && key !== 'colorNo' && item[key] !== '') {
      //       const mapKey = this.barcodeInputValue + '-' + item.colorNo + key
      //       const mapValue = Number(item[key])

      //       myMap.set(mapKey, mapValue)
      //       console.log(myMap, 'myMap')
      //     }
      //   }
      // })
      // let makeMapObj = {}
      // for (const key of myMap) {
      //   console.log(key, '被遍历的map集合')
      //   makeMapObj[key[0]] = key[1]
      // }
      // console.log(makeMapObj, 'makeMapObj')
      const paramsObj = {
        accountType: 0, // 账号类型 0店铺 1公司
        // affirm: '', // 单据确认
        bill: this.small_piao_inputValue, // 小票号
        // brandedName: '', // 品牌名称
        // colorName: '', // 颜色
        customerSellSequence: this.customerSellSequence, // 客户销售序号
        vipSellSequence: this.SellSequence,
        directSaleNo: this.$store.state.currentStoreData.no, // 直营店编号
        discount: this.discountInputValue, // 折数 (v-module绑定的就是这个对象里面的属性，响应式)（这个折数在可以选择件单价的时候（传不传都没所谓），只能选择默认的，关闭件单价的时候，是以输入的为准的）
        // endTime: '', // 结束日期
        // isMakeUp: 0, // 补单（0否1是）
        isPaidOnePrice: this.unitPriceCheckBoxStatus ? 1 : 0, // 是否是实收单价（1是0否）(件单价)
        // kindsNumber: makeMapObj, // 货号
        kindsNumber: '', // 货号 (no对象)
        // limit: '', // 分页条数
        // money: '', // 金额
        number: '', // 数量 （在下面的makeMapObj的时候，赋值了，就是填写在中间表格的数据）
        onePrice: this.unitPriceCheckBoxStatus ? this.unitPriceInputValue : '', // 实收单价 （件单价数量）
        // page: '', // 当前的页码
        personnelList: this.yingyeyuan_arr, // 营业员
        // preferential: '', // 优惠
        // receiptsNumber: '', // 单据号
        remark: this.remarkInputValue, // 备注
        // sellPrice: '', // 售价
        sellTime: this.sellTimeValue, // 销售日期
        sequenceType: this.typePullSelectValue, // 单号类型（1正常2退货3赠送）
        // size: '', // 尺寸
        // startTime: '', // 开始日期
        typeNumber: this.barcodeInputValue, // 型号（款号）
        vip: this.currentvipPullSelectValue // vip
        // vipSellSequence: '', // vip店铺销售序号
        // vipSellSequenceList: [] // vip店铺销售序号
      }
      // console.log(paramsObj, 'paramsObj啊啊')
      // const currentArr = []
      // for (let key in makeMapObj) {
      //   paramsObj.kindsNumber = key
      //   paramsObj.number = makeMapObj[key]
      //   const aa = JSON.stringify(paramsObj)
      //   const currentObj = JSON.parse(aa)
      //   currentArr.push(currentObj)
      // }
      // console.log(paramsObj, 'paramsObj啊啊paramsObj啊啊paramsObj啊啊paramsObj啊啊')
      const currentArr = []
      for (let key in mapObj) {
        // console.log(key, '遍历对象中')
        paramsObj.kindsNumber = key
        paramsObj.number = mapObj[key]
        const aa = JSON.stringify(paramsObj)
        const currentObj = JSON.parse(aa)
        currentArr.push(currentObj)
      }
      // console.log(currentArr)
      // console.log(currentArr, 'currentArr')
      const { data: res } = await add_store_sales_api(currentArr)
      // console.log(res, 'add_store_sales_api')
      if (res.code !== 200) return
      // 去掉时间后面的时分秒
      res.data.map((item) => {
        if (item.enteringTime) {
          item.enteringTime = item.enteringTime.substring(0, 10)
        }
      })
      // 成功之后，确认按钮可以点击
      this.confirmBtnDisabled = false

      this.barcodeTableData = res.data
      // 保存店铺销售序号（这个是显示在销售序号的）
      this.SellSequence = this.barcodeTableData[0].vipSellSequence
      // 保存客户销售序号
      this.customerSellSequence = this.barcodeTableData[0].customerSellSequence
      // 然后清空中间表的数据
      this.sizeTableData = []
      // 清空款号
      this.barcodeInputValue = ''
      // 清空表格中间的款号
      this.header = ''
      this.unitPriceInputValue = ''
      // console.log(this.barcodeTableData[0], 'this.barcodeTableData[0]')
    },
    // 输入款号按下回车的时候，触发的函数
    async barcodeEnterEvent() {
      if (!Object.keys(this.showCurrentVipObj).length)
        return this.$message.warning('请选择vip')
      // 先清空原来的，以免重新赋值
      this.sizeTableData = []
      this.sizeList = []
      //
      // console.log(this.barcodeInputValue)
      const { data: res } = await getKindsNumberList({
        kindsNumberStr: this.barcodeInputValue
      })
      // console.log(res, 'getKindsNumberList')
      // 输入款号显示中间表和尺码信息   ZZZ-AAS(排序，先数字再字母)
      res.data.data.sort((a, b) => {
        return a.relevanceSize.localeCompare(b.relevanceSize)
      })
      if (res.code !== 200) return
      if (res.data.data.length) {
        this.header = res.data.data[0].styleNumber
        // console.log(res.data.data, ' res.data.data')
        // do something
        const { data: result } = await getBarCode({
          company: res.data.data[0].brandedCompany
        })
        // console.log(result, 'getBarCode')
        this.manufacturerBarCode = result.data[0]
        // console.log(this.manufacturerBarCode,'manufacturerBarCodemanufacturerBarCodemanufacturerBarCode')
      } else {
        const mess = this.$message({
          type: 'info',
          message: '无此款号数据',
          showClose: true,
          // duration: 500,
          center: true
        })
        // 手动关闭
        setTimeout(() => {
          mess.close()
        }, 1500)
        return
      }
      const currentList = []
      for (const item of res.data.data) {
        for (const key in item) {
          if (key === 'size') {
            currentList.push(item[key])
          }
        }
      }
      // 解决快速点击回车的时候，出现多个
      this.sizeList = []
      let s = new Set(currentList)
      this.sizeList.push(...s)
      // console.log(this.sizeList, 'sizeList')

      // console.log(res, 'reds')
      let tmp = res.data.data
      this.tmpBarcodeData = tmp
      // console.log(tmp, 'temp')
      // 中间表(1)
      let tmpCodeData = [
        { colorNo: tmp[0].colorNo, colorName: tmp[0].colorName }
      ]
      let isExistColor = 0
      for (const i of tmp) {
        for (const j of tmpCodeData) {
          if (j.colorName == i.colorName) {
            isExistColor = 0
            break
          }
          isExistColor = 1
        }
        if (isExistColor) {
          tmpCodeData.push({
            colorNo: i.colorNo,
            colorName: i.colorName
          })
        }
      }
      //
      tmpCodeData.forEach((e) => {
        this.sizeList.forEach((f) => {
          e[f] = ''
        })
      })
      // console.log(tmpCodeData, 'tmpCodeData这个是收集到的颜色编号和名称的数组')

      this.sizeTableData = tmpCodeData
      // 在中间表格弄好之后，下面的逻辑就是获取所有的元素，然后给第一个获取焦点，并且，给最后一个按下回车的时候，绑定一个回车事件
      this.$nextTick(() => {
        // 获取表格容器的dom
        let codeTable = document.getElementById('codeTable')
        // 在里面获取input
        let inputs = codeTable.getElementsByTagName('input')

        if (inputs.length) {
          inputs[0].focus()
          inputs[inputs.length - 1].onkeyup = (e) => {
            if (window.event.keyCode == 13) {
              // 调用继续录入
              this.keepGoingBtnClick()
              // 清空这个事件
              inputs[inputs.length - 1].onkeyup = () => {}
            }
          }
        }
      })
      // 当完成了中间表格相关的数据之后，要开始请求折数（后端新增）
      const discountParams = {
        sellTime: this.getNowTime(this.sellTimeValue),
        styleNumber: this.barcodeInputValue
      }
      // console.log(discountParams, 'discountParams')
      const { data: disResult } = await get_discount_api(discountParams)
      // console.log(disResult, 'get_discount_api')
      // 比较拿到的折数和vip的折数对比，取最小的折数
      if (!disResult.data) return
      // 不等于空的时候，对比vip的折数
      if (disResult.data < this.showCurrentVipObj.discount) {
        this.showCurrentVipObj.discount = disResult.data
      }
    },

    // 基本接口的api-获取vip用户信息
    async get_vip_customer_data() {
      // 每一次调用的时候，要清空，否则可能,更新的时候，就一直的push
      this.vipPullSelectList = [{ id: -100, phone: '+', name: '新增' }]
      const { data: res } = await get_vip_customer_data_api({
        directSaleNo: this.$store.state.currentStoreData.no
      })
      // console.log(res.data, 'get_vip_customer_data_api')
      this.vipPullSelectList.push(...res.data)
    },
    // { index, key, result }
    handleInputBlurResult(e, { index, key, result }) {
      // 这个result就是拿到每一个表格中输入的数据
      // let onlyFuShu = /\-\d*(\.\d+)?/ // 这个正则判断是否为负数
      // console.log('onlyFuShu', onlyFuShu.test(result)) // 正数为false,负数为true
      // let onlyFuShu = /^(-)?[1-9][0-9]*$/ // 这个正则只能判断是否输入0
      // 退货的时候，只能输入负数
      // console.log('选中的类型', this.typePullSelectValue)
      // 退货的时候，只能输入负数
      if (this.typePullSelectValue === 2) {
        const numResult = result === '' ? '' : parseFloat(result)
        // console.log('numResult', numResult)
        // numResult === '' 或者 === 0
        if (!numResult) {
          if (numResult === 0) {
            this.$message.warning('类型为 退货, 只能输入负数,请重新输入')
            this.sizeTableData[index][key] = ''
            return
          } else {
            // 为空的话，就是没有值，那么就不提示
            this.sizeTableData[index][key] = ''
            return
          }
        }
        // 输入的不是负数
        if (numResult > 0) {
          this.$message.warning('类型为 退货, 只能输入负数,最大值为 -1')
          this.sizeTableData[index][key] = -1
          return
        }
        // let onlyFuShu = /\-\d*(\.\d+)?/ // 这个正则判断是否为负数
        // console.log('onlyFuShu', onlyFuShu.test(result))
        // 输入不是负数
        // if (!onlyFuShu.test(result)) {
        //   // 里面有值,并且
        //   this.$alert('类型为 退货, 只能输入负数,最大为 -1', '', {
        //     confirmButtonText: '确定'
        //   })
        //   this.sizeTableData[index][key] = ''
        //   return
        // }
      } else {
        const numResult = result === '' ? '' : parseFloat(result)
        // console.log('numResult', numResult)
        if (numResult < 0) {
          this.$message.warning(
            '类型为 正常或者赠送，输入的值只能大于0,最小为 1'
          )
          this.sizeTableData[index][key] = 1
          return
        }
        // numResult === '' 或者 === 0
        if (!numResult) {
          if (numResult === 0) {
            this.$message.warning(
              '类型为 正常或者赠送，输入的值只能大于0,最小为 1'
            )
            this.sizeTableData[index][key] = ''
            return
          } else {
            // 为空的话，就是没有值，那么就不提示
            this.sizeTableData[index][key] = ''
            return
          }
        }
        // 正常或者赠送只能输入正数
        // const aa =
        //   e.target.parentNode.parentNode.parentNode.classList.remove(
        //     'activeCell'
        //   )
        let r = /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/

        if (result != 0) {
          result = result.replace(/\b(0+)/gi, '')
        }
        // 正常或者赠送只能输入正数
        if (!r.test(result) && result) {
          // if (onlyFuShu.test(result) || (!r.test(result) && result)) {
          this.$alert('数量请输入整数', '', {
            confirmButtonText: '确定'
          })
          this.sizeTableData[index][key] = 1
          return
        }
        this.sizeTableData[index][key] = result
        // console.log(this.sizeTableData, 'sizeTableData')
      }
    },
    // 表格中的input被按下回车的时候，触发的函数(并且自动的获取下一个输入框)
    inpEnter(e) {
      // console.log(e.target, 'inpEnter')
      // 获取表格容器的dom
      let codeTable = document.getElementById('codeTable')
      // 在里面获取input
      let inpList = codeTable.getElementsByTagName('input')
      const inputArr = [...inpList]
      // 按下回车
      e.target.blur()
      let index = inputArr.indexOf(e.target)
      if (index != -1) {
        if (index != inputArr.length - 1) {
          console.log(inputArr[index].parentNode, 'inputArr[index].parentNode')
          inputArr[index].parentNode.classList.remove('is-focus')
          let regList = document.getElementsByClassName('region')
          let dropList = document.getElementsByClassName('el-select-dropdown')
          regList.forEach((x) => {
            x.style.display = 'none'
          })
          dropList.forEach((x) => {
            x.style.display = 'none'
          })
          let tmp = document.getElementsByClassName(
            'el-autocomplete-suggestion'
          )
          tmp.forEach((e) => {
            // console.log(e)
            e.style.display = 'none'
          })
          inputArr[index + 1].focus() // 设置焦点  焦点跳到下一个输入框
          //     // let evt = document.createEvent("UIEvents")
          //     // evt.keyCode = 9
          //     // evt.initEvent("keyup", true, true)
          //     // this.dispatchEvent(evt)
        }
      }
    },

    closeIconClick() {
      this.$emit('closeNewBuildDialog', this.SellSequence)
    },
    closeBtnClick() {
      this.$emit('closeNewBuildDialog', this.SellSequence)
    },
    // 监听条形码输入框的改变
    watchInputCurrentChange(val) {
      this.barcodeInputValue = val.toUpperCase()
    },
    // 营业员被点击的时候，触发的函数
    yingyueyuan_btnClick() {
      this.isShow_yingyueyuan_dislog = true
    },
    // 营业员关闭icon被点击的时候，触发的函数
    close_yingyueyuan_dialog() {
      this.isShow_yingyueyuan_dislog = false
    },
    // 保存子组件的营业员
    keepNewStr(newStr, arr) {
      console.log(newStr, arr, '收到子组件的数据')
      this.show_yingyeyuan_info = newStr
      this.yingyeyuan_arr = arr
    },
    // vip下拉框选中的值发生变化的时候，触发的函数
    vipPullSelectValueChange(selectPhone) {
      // console.log(selectPhone, 'vipPullSelectList')
      // 保存当前的时间给，结账对象用
      const currentObj = this.vipPullSelectList.find((item) => {
        return item.phone === selectPhone
      })
      // 点击的是新增的话，直接新增的dialog
      if (currentObj.id === -100) {
        // 调转到vip
        this.$router.push({
          path: '/stores/store_basic_info',
          query: {
            id: -1000
          }
        })
        // 不用写新增
        // this.isShowNewAddVipDialog = true
        return
      }
      // this.selectCurrentObj = currentObj
      // console.log(currentObj, 'vipPullSelectValueChange')
      // 选中的是vip号了，根据vip手机号遍历出来这个对象
      // 赋值v-model
      this.vipPullSelectValue = currentObj.phone + currentObj.name
      // 保存要发给后端的手机号码
      this.currentvipPullSelectValue = currentObj.phone
      // 选中的时候，在顶部展示该vip数据（这个是全局的选中的vip对象）
      // 赋值给折数
      this.discountInputValue = currentObj.discount
      this.showCurrentVipObj = currentObj
      // if (val === '+') {
      //   // 显示新增vip框
      //   this.isShowNewAddVipDialog = true
      //   val = ''
      // }
    },
    // 新增vip关闭icon点击的时候，监听事件
    closeNewAddVipDialog() {
      this.isShowNewAddVipDialog = false
    },
    // 点击查看vip的时候，触发的函数
    lookVipBtnClick() {
      // 选中vip才能显示这个对话框
      if (!this.vipPullSelectValue) return this.$message.warning('请选择vip')
      this.isShowLookVipDialog = true
    },
    // 点击查看全部vip的时候，触发的函数
    lookAllVipClick() {
      // 调转到vip讲坛
      this.$router.push({
        path: '/stores/store_basic_info'
        // path: '/stores/store_vip'
      })
    },
    // 点击结账的时候，触发的函数
    accountsBtnClick() {
      this.isShowAccountsDialog = true
    },
    // 监听结账dialog的关闭icon的函数
    accountsCloseIconClick() {
      this.isShowAccountsDialog = false
    },
    // 监听子组件结账成功之后，触发的事件 关闭对话框，并且禁用结账按钮
    async accountsCloseIconClickAndDiableBtn() {
      this.isShowAccountsDialog = false
      // 结账成功之后， 刷新vip信息
      // console.log('调用更新vip数据')
      /* 重新发起ajax请求，拿到服务器返回的新的vip列表数据 */
      const { data: res } = await get_vip_customer_data_api({
        directSaleNo: this.$store.state.currentStoreData.no
      })
      // console.log(res.data, 'get_vip_customer_data_api')
      // 每一次调用的时候，要清空，否则可能,更新的时候，就一直的push
      this.vipPullSelectList = [{ id: -100, phone: '+', name: '新增' }]
      if (res.code !== 200) return
      this.vipPullSelectList.push(...res.data)
      /* 找到目前选中的vip客户 */
      const currentObj = this.vipPullSelectList.find((item) => {
        return `${item.phone}${item.name}` === this.vipPullSelectValue
      })
      // 重新赋值，达到更新的目的
      this.showCurrentVipObj = currentObj
      // console.log('currentObj', currentObj)
      // console.log('vipPullSelectValue', this.vipPullSelectValue)
      // this.vipPullSelectValueChange()
      // 禁用结账按钮
      this.accountsBtnDisabled = true
    },

    // 确认按钮被点击的时候，触发的函数
    async confirmBtnClick() {
      // 点击确认的时候，如果底部表格数据是空的，就不给点击
      if (this.barcodeTableData.length) {
        // 点击确认的时候，发起ajax请求
        const { data: res } = await confirm_api({
          vipSellSequence: this.SellSequence
        })
        // console.log(res, 'confirm_api')
        if (res.code !== 200) return
        // 成功之后，要禁用确认按钮
        this.confirmBtnDisabled = true
        // 发送成功之后，才可以禁用继续录入
        this.keepBtnDisabled = true
        // 继续录入如果被禁用，那么结账就可以被点击 :类型在正常才能点击结账
        // 这里的逻辑，主要是： 只有正常或者退货才可以点结账
        if (this.typePullSelectValue === 1 || this.typePullSelectValue === 2) {
          //  进来的话，那么结账按钮可以点击
          this.accountsBtnDisabled = false
        }
      }
    },
    // 折数改变的时候，触发的函数
    discountInputValueChange(val) {
      if (!Object.keys(this.showCurrentVipObj).length) {
        this.$message.warning('请选择vip')
        return (this.discountInputValue = '')
      }
      if (val > 10) {
        this.$message.warning('折数只能在0-10之间,最大只能为10')
        return (this.discountInputValue = 10)
      }
      if (val < 0) {
        this.$message.warning('折数只能在0-10之间,最小只能为0')
        return (this.discountInputValue = 0)
      }
    }
  },
  computed: {
    // 计算优惠
    you_hui() {
      return this.barcodeTableData.reduce((pre, item) => {
        // return pre + item.preferential
        return new this.$bigNumber(pre).plus(item.preferential)
      }, 0)
    },

    // 计算折数
    discount() {
      const currentDiscount =
        this.barcodeTableData.reduce((pre, item) => {
          return pre + item.discount
        }, 0) / this.barcodeTableData.length
      return currentDiscount
    },
    // 计算数量
    totalNumber() {
      let aa = this.barcodeTableData.reduce((pre, item) => {
        // console.log(pre, item, 'pre,next')
        // return pre + item.number //采用大数字来计算精度问题
        return new this.$bigNumber(pre).plus(item.number)
      }, 0)
      // console.log('计算数量的aa', aa)
      return aa.c ? aa.c[0] : 0
    },
    // 计算应收的金额
    yingshou_jiner() {
      let aa = this.barcodeTableData.reduce((pre, item) => {
        // return pre + (item.money - item.preferential) 应收的金额不用再乘折数
        // return pre + item.money //采用大数字来计算精度问题
        return new this.$bigNumber(pre).plus(item.money)
      }, 0)
      // console.log('111111111', aa.c ? aa.c[0] : 0)
      // 返回的是一个大对象
      // return aa.c ? aa.c[0] : 0
      return aa
    },
    // 吊牌金额（不算打折）bigNumber返回的是一个大对象
    diaopai_jiner() {
      let aa = this.barcodeTableData.reduce((pre, item) => {
        // return pre + item.sellPrice * item.number
        //采用大数字来计算精度问题
        return new this.$bigNumber(pre).plus(
          new this.$bigNumber(item.sellPrice).times(item.number)
        )
      }, 0)
      // console.log('计算吊牌金额', aa)
      return aa.c ? aa.c[0] : 0
      // return this.barcodeTableData.reduce((pre, item) => {
      //   // return pre + item.sellPrice * item.number
      //   //采用大数字来计算精度问题
      //   return new this.$bigNumber(pre).plus(
      //     new this.$bigNumber(item.sellPrice).times(item.number)
      //   )
      // }, 0)
    }
  },
  components: {
    ClerkClick,
    NewAddVip,
    LookVip,
    Accounts
  }
}
</script>

<style lang="less" scoped>
.info {
  display: flex;
  justify-content: space-between;
}
/deep/.yinyueyuan {
  // input输入框的样式
  margin-left: 10px;
  width: 300px !important;
  .el-input__inner {
    width: 300px;
    height: 32px;
  }
}
.xuhao {
  margin-right: 20px;
}

/* 新建资料 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.new_ss {
  position: fixed;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-height: 800px;
  z-index: 99;
  background-color: white;
  overflow: auto;
}
.new_ss .vs-top {
  height: 40px;
  background-color: #f8f8f8;
  margin-bottom: 10px;
}
.new_ss .vs-top p {
  float: left;
  line-height: 40px;
  padding-left: 20px;
  font-weight: 700;
}
.new_ss .vs-top i {
  float: right;
  line-height: 40px;
  padding: 0 16px;
}

.new_ss input {
  height: 30px;
  border: solid 1px #dcdfe6;
  border-radius: 5px;
  margin-left: 10px;
}
.new_ss input:focus {
  outline: none;
  border: solid 1px #409eff;
}

.vs-info {
  padding: 0 20px;
}
.vs-info .info {
  height: 30px;
  margin-bottom: 10px;
}
.vs-info p {
  display: inline-block;
  /* width: 100px; */
  text-align: right;
  margin-right: 15px;
}
.colorBox,
.infoBox {
  display: inline;
}

.enterBarcode {
  display: flex;
  height: 60px;
  line-height: 60px;
  background-color: #f2f2f2;
  margin: 15px 0;
}

.ss-btn {
  float: right;
  margin: 15px 0;
  padding: 0 15px;
  width: 100%;
  text-align: right;
}
.ss-btn p {
  float: left;
}

.popup {
  width: 400px;
  height: 200px;
  border: 2px solid #f4f4f4;
  box-shadow: 0 2px 2px 2px #dbdbdb;
  z-index: 999;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -200px;
  background: white;
  display: block;
}
.popup_t {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  background: rgb(244, 244, 244);
  padding: 8px 15px;
}
.popup_t p {
  font-weight: 700;
}
.popup_c {
  padding: 8px 15px;
}
.popup_button {
  margin: 5px 0 0 0;
  width: 94%;
  height: 30px;
  padding: 0 10px;
  border: 2px solid #f4f4f4;
  border-radius: 3px;
}
.popup_b {
  margin: 10px 0 0 0;
  padding-left: 230px;
}

.VIPinfo {
  display: flex;
  justify-content: space-between;
  color: white;
  margin-bottom: 10px;
  text-align: center;
}
.VIPinfo p {
  width: inherit;
  white-space: nowrap;
  margin: 0;
  text-align: center;
}
.VIPinfo > div {
  background-color: #4786fa;
  border-radius: 5px;
  height: 80px;
  display: flex;
  justify-content: space-around;
}

.VIPinfo > div:first-child {
  width: 49%;
}
.VIPinfo span {
  width: 80px;
  padding-top: 10px;
}
.VIPinfo span p:first-child {
  font-size: 2.5vh;
}
.VIPinfo > div:last-child {
  width: 49%;
}

.VIPinfoBtn {
  padding-top: 8px !important;
}
.VIPinfoBtn p {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-size: 16px !important;
  padding: 2px 5px;
  cursor: pointer;
}
.VIPinfoBtn p:first-child {
  margin-bottom: 8px;
}
</style>

<style>
.new_ss .info .el-input,
.new_ss .info .el-select {
  width: 160px;
}
.new_ss .el-input__inner {
  height: 30px !important;
}
.new_ss .el-input__icon {
  line-height: 30px !important;
}
.vs-info .barcode .el-switch {
  margin: 0 !important;
}

.new_ss .enterBarcode .el-input {
  width: 200px;
  margin-left: 10px;
}

.new_ss .colorBox .el-input {
  width: 60px;
  margin-right: 10px;
}
.new_ss .colorBox .el-input--suffix {
  width: 90px;
}

.new_ss input:focus {
  outline: none;
  border: buildlid 1px #409eff;
}
.new_ss .el-input-group {
  padding-top: 15px;
}
</style>
